<template>
  <div class="background">
            <div class="head"> <h1 >Yihen Menu</h1> </div>
    <div class="menu">
    <YihenSimpleCollapse
      title="个人介绍"
      :items="accordionData"
      fontFamily="PingFang SC"
    >
      <template #content="{ item }">
        
      <YihenPixelBalloon from="left">
        <ul>
            <li v-for="(v, i) in item.list" :key="i">
                {{ v }}
            </li>
          </ul>
      </YihenPixelBalloon>
      </template>
    </YihenSimpleCollapse>
    </div>

        <YihenPixelButton 
    @click="goto('/')" type="primary" class="fixed-back-btn"> < </YihenPixelButton>
  </div>
</template>

<script setup>
import YihenSimpleCollapse from "../components/collapse/Yihen-SimpleCollapse.vue";
import YihenPixelButton from "../components/button/Yihen-PixelButton.vue";
import YihenPixelContainer from "../components/container/Yihen-PixelContainer.vue";
import YihenPixelBalloon from "../components/balloon/Yihen-PixelBalloon.vue";
import { ref } from "vue";
import {useRouter , useRoute} from 'vue-router'
const router = useRouter()

const accordionData = [
  {
    title: "辣椒炒肉",
    tags: ["辣辣辣！", "湖南特色"],
    list: ["食材：牛肉/猪肉 ，葱姜水，食用油，螺丝椒，蒜，小米辣。",
     "调料：淀粉，耗油，鸡粉，胡椒粉，生抽，老抽。",
     "1.牛肉/猪肉切丝，少许胡椒粉，两勺生抽，半勺老抽，加入葱姜水，淀粉，食用油，腌制二十分钟。",
     "2.螺丝椒切滚刀块，蒜切末，小米辣切丝。",
     "3.热油下牛肉/猪肉丝，爆炒三十秒，炒断生盛出备用。",
     "4.热油放入姜蒜，小米辣，爆炒出香味，放入螺丝椒，翻炒至稍微变软。",
     "5.放入牛肉/猪肉丝，调味：一勺耗油，少许老抽，少许鸡粉。翻炒均匀，出锅即可。",
    ],
  },
  {
    title: "黄瓜鸡丁",
    tags: ["清爽甜口", "减脂！"],
    list: ["食材：鸡胸肉丁、黄瓜丁、蒜末。",
     "调料：淀粉，盐，耗油，料酒，胡椒粉，生抽，老抽。",
     "1.鸡胸肉+一勺料酒+一勺生抽+半勺老抽+少许胡椒粉+一勺淀粉。拌匀腌制二十分钟。",
     "2.起锅鸡胸肉炒变色。",
     "3.放入蒜末炒香，下入黄瓜。",
     "4.一勺耗油+少许盐+胡椒粉。翻炒出锅。",
    ],
  },
    {
    title: "香辣鸡腿肉",
    tags: ["香辣麻辣", "嫩！"],
    list: ["食材：鸡腿去骨切丁、青辣椒碎、红辣椒碎、蒜末、花椒。",
     "调料：淀粉，糖，盐，耗油，料酒，胡椒粉，生抽，老抽。",
     "1.鸡腿丁+一勺料酒+一勺生抽+适量胡椒粉+一勺淀粉。拌匀腌制十五分钟。",
     "2.油热鸡腿煎至金黄。",
     "3.放入蒜末、花椒炒香。",
     "4.一勺生抽+半勺老抽+一勺耗油+少许盐+少许糖。",
     "5.加入青红辣椒碎炒匀。",
    ],
  },
   {
    title: "芹菜炒肉",
    tags: ["芹菜好吃好吃", "下饭下饭！"],
    list: ["食材：肉丝、芹菜、小米椒、蒜末。",
     "调料：淀粉，盐，耗油，料酒，胡椒粉，生抽，老抽。",
     "1.肉丝+一勺生抽+一勺淀粉+少量食用油。拌匀腌制三十分钟。",
     "2.油热下肉丝，炒至半熟变色。",
     "3.放入蒜末、小米辣。",
     "4.生抽+老抽+少许盐+胡椒粉。大火炒出酱香味",
     "5.加入芹菜炒匀。芹菜炒软出锅。",
    ],
  },

     {
    title: "芹菜炒肉",
    tags: ["芹菜好吃好吃", "下饭下饭！"],
    list: ["食材：肉丝、芹菜、小米椒、蒜末。",
     "调料：淀粉，盐，耗油，料酒，胡椒粉，生抽，老抽。",
     "1.肉丝+一勺生抽+一勺淀粉+少量食用油。拌匀腌制三十分钟。",
     "2.油热下肉丝，炒至半熟变色。",
     "3.放入蒜末、小米辣。",
     "4.生抽+老抽+少许盐+胡椒粉。大火炒出酱香味",
     "5.加入芹菜炒匀。芹菜炒软出锅。",
    ],
  },

     {
    title: "香菇炒肉",
    tags: ["鲜！", "下饭下饭！"],
    list: ["食材：肉片、香菇、青椒丝、小米椒、蒜末。",
     "调料：淀粉，盐，耗油，料酒，胡椒粉，生抽。",
     "1.肉片+一勺料酒+一勺生抽+一勺淀粉+一勺食用油+少许胡椒粉。拌匀腌制十分钟。",
     "2.香菇切片，焯水一分钟。",
     "3.油热下肉片，炒至变色盛出。",
     "4.锅底留油，放入蒜末、小米辣爆香。",
     "5.倒入香菇翻炒均匀",
     "6.倒入肉片，加入一勺耗油、一勺生抽、少许盐、少许鸡精。",
     "7.倒入青椒，翻炒入味出锅。",
    ],
  },
  
];


function goto(name){
    //  路由跳转
    router.push({
        path: name, // 路由
    })
}
</script>

<style  scoped>
.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 30% 30%, #5d7db3 0%, #565879 100%);
  z-index: 0;
  overflow: auto;
}

/* 美化滚动条 */
.background::-webkit-scrollbar {
  width: 10px;
  background: rgba(0, 0, 0, 0.05);
}
.background::-webkit-scrollbar-thumb {
  background: #7b8cc4;
  border-radius: 8px;
}
.background::-webkit-scrollbar-thumb:hover {
  background: #4e5a8a;
}

.background {
  scrollbar-width: thin;
  scrollbar-color: #7b8cc4 rgba(0, 0, 0, 0.05);
}

.head {
    margin-top: 30px;
    width: 100%;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #282b5a;
    text-align: center;
}
.menu{
    height: 80vh;
}

.fixed-back-btn {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  width : 5%;
  align-items: center;
  

}

</style>